<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>用户总数</span>
            </div>
          </template>
          <div class="card-content">
            <div class="number">{{ statistics.userCount }}</div>
            <div class="icon">
              <el-icon><User /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>在线用户</span>
            </div>
          </template>
          <div class="card-content">
            <div class="number">{{ statistics.onlineCount }}</div>
            <div class="icon">
              <el-icon><UserFilled /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>通话总数</span>
            </div>
          </template>
          <div class="card-content">
            <div class="number">{{ statistics.callCount }}</div>
            <div class="icon">
              <el-icon><Phone /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>系统状态</span>
            </div>
          </template>
          <div class="card-content">
            <div class="number">{{ statistics.systemStatus }}</div>
            <div class="icon">
              <el-icon><Monitor /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>最近通话记录</span>
            </div>
          </template>
          <el-table :data="recentCalls" style="width: 100%">
            <el-table-column prop="caller" label="主叫" />
            <el-table-column prop="callee" label="被叫" />
            <el-table-column prop="duration" label="时长" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="scope.row.status === '成功' ? 'success' : 'danger'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>系统信息</span>
            </div>
          </template>
          <div class="system-info">
            <div class="info-item">
              <span class="label">系统版本：</span>
              <span class="value">{{ systemInfo.version }}</span>
            </div>
            <div class="info-item">
              <span class="label">运行时间：</span>
              <span class="value">{{ systemInfo.uptime }}</span>
            </div>
            <div class="info-item">
              <span class="label">CPU使用率：</span>
              <span class="value">{{ systemInfo.cpuUsage }}%</span>
            </div>
            <div class="info-item">
              <span class="label">内存使用率：</span>
              <span class="value">{{ systemInfo.memoryUsage }}%</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const statistics = ref({
  userCount: 1250,
  onlineCount: 89,
  callCount: 15678,
  systemStatus: '正常'
})

const recentCalls = ref([
  { caller: '1001', callee: '1002', duration: '00:05:30', status: '成功' },
  { caller: '1003', callee: '1004', duration: '00:02:15', status: '失败' },
  { caller: '1005', callee: '1006', duration: '00:08:45', status: '成功' },
  { caller: '1007', callee: '1008', duration: '00:01:20', status: '成功' }
])

const systemInfo = ref({
  version: 'v1.0.0',
  uptime: '15天 8小时 32分钟',
  cpuUsage: 45,
  memoryUsage: 68
})

onMounted(() => {
  // 这里可以加载实际的数据
  console.log('Dashboard mounted')
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  
  .box-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .card-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .number {
        font-size: 24px;
        font-weight: bold;
        color: #409EFF;
      }
      
      .icon {
        font-size: 48px;
        color: #E6A23C;
      }
    }
  }
  
  .system-info {
    .info-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      
      .label {
        font-weight: bold;
        color: #606266;
      }
      
      .value {
        color: #409EFF;
      }
    }
  }
}
</style>
